<template>
  <div class="warp-box">
    <split-pane split="vertical" min-width="100" :min-percent='20' :default-percent='20'>
      <template slot="paneL">
        <div class="left-container">
          <left-tree @handleNodeClick="handleNodeClick"></left-tree>
        </div>
      </template>
      <template slot="paneR">
        <div class="right-container">
          <right-tabs ref="rightRef"></right-tabs>
        </div>
      </template>
    </split-pane>
  </div>
</template>

<script>
import SplitPane from 'vue-splitpane'
import LeftTree from './components/LeftTree'
import RightTabs from './components/RightTabs'
import { debounce } from '@/utils/util.js'
export default {
  name: 'fairyshell',
  components: {
    SplitPane,
    LeftTree,
    RightTabs
  },
  methods: {
    handleNodeClick: debounce(function (data) {
      this.$refs.rightRef && this.$refs.rightRef.addTab(data)
    }, 600),
  },
  mounted() {
    this.addOperLog({title:"启动FairyShell桌面版"})
    document.oncontextmenu = () => { return false; }
  }
}
</script>

<style lang="scss" scoped>
.warp-box {
  width: 100%;
  height: 100%;

  .left-container {
    height: 100%;
  }

  .right-container {
    height: 100%;
  }
}
</style>
